<#include "/include/macros.ftl">
<@header></@header>
<@breadcrumb>
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">详情</li>
    </ol>
</@breadcrumb>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/ico"/>

    <title>详情</title>

    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../assets/css/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../assets/css/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="../assets/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="../assets/css/jqvmap.min.css" rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link href="../assets/css/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../assets/css/custom.min.css" rel="stylesheet">
    <style>
        * {
            cursor: default
        }

        .center_center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bodys {
            border: 1px solid #ddd
        }

        .title {
            height: 70px;
            position: relative;
        }

        .title > span {
            font-size: 20px;
        }

        .title > button {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .desc {
            font-size: 18px;
            border-bottom: 1px solid #ddd;
        }

        .coverImage {
            margin-top: 10px
        }

        .bodyz {
            width: 100%;
            display: flex;
            flex-flow: column;
            align-items: center;
            padding-top: 50px;
        }

        .bodyz p {
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
            width: 400px;
        }

        .bodyz img {
            display: block;
            margin-bottom: 10px;
            width: 400px;
        }

        .bodyz p > img {
            margin: 0;
        }

        .auther_message {
            display: flex;
            height: 50px;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .auther_message > img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }

        .auther_message > div {
            width: 400px;
            height: 50px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            margin-left: 10px;
        }

        .auther_message > div > span {
            color: rgb(124, 124, 124);
            font-weight: bold;
        }

        .auther_message > div > div {
            display: flex;
            align-items: center;
        }

        .auther_message > div > div > span {
            margin-left: 25px;
        }

        .auther_message > div > div > span:first-of-type {
            margin: 0;
        }

        .auther_message > div > div > span:last-of-type {
            display: block;
            height: 20px;
            width: 40px;
            line-height: 20px;
            text-align: center;
            border: 1px solid rgb(249, 185, 0);
        }

        .softNum {
            justify-content: flex-end;
            font-size: 15px;

        }

        .softNum > span {
            margin-left: 12px;
        }

        .softNum > i {
            font-size: 15px;
            margin-left: 12px;
        }

        .compageS {
            margin-top: 10px;
        }

        .pagination a {
            text-decoration: none;
            border: 1px solid #AAE;
            color: #15B;
        }

        .pagination a, .pagination span {
            display: inline-block;
            padding: 0.1em 0.4em;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .pagination .current {
            background: #26B;
            color: #fff;
            border: 1px solid #AAE;
        }

        .pagination .current.prev, .pagination .current.next {
            color: #999;
            border-color: #999;
            background: #fff;
        }

        .allComment {
            display: flex;
            height: 130px;
            border-bottom: 1px solid #DDD;
            align-items: center;
            padding-left: 12%;
        }

        .allComment > img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }

        .allComment > div {
            height: 100%;
            padding: 20px 0;
            margin-left: 20px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            position: relative;
        }

        .allComment > div > img {
            height: 35px;
            width: 90px;
            position: absolute;
            right: 0;
            top: 20px;
        }

        .allComment > div > div > span {
            margin-left: 20px;
            color: rgb(26, 188, 156);
            cursor: pointer;
        }

        .allComment > div > div > span:first-of-type {
            margin-left: 0;
            color: #73879C;
            cursor: default
        }
    </style>
</head>

<body class="nav-md">
<div class="container body">

    <!-- /top navigation -->

    <!-- page content 中间的内容-->
    <div class="right_col" role="main">
        <div class="x_content">
            <label class="col-form-label col-md-3 col-sm-3 label-align"></label>
            <div class="col-md-6 col-sm-6 bodys">
                <div class="item form-group center_center title ">
                    <span style="font-weight: bold;">日式简约风格装修效果图</span>
                    <!-- <span style="font-weight: bold;"></span> -->
                    <button class="btn btn-success  back">返回</button>
                </div>
                <div class="item form-group center_center desc ">
                    <span>发布时间：2019-03-20  15：00</span>
                </div>

                <div class="auther_message">
                    <img src="../assets/img/cropper.jpg" alt="">
                    <div>
                        <span>青白设计师</span>
                        <div>
                            <span>三室两厅两卫</span>
                            <span>150平方米</span>
                            <span>平房</span>
                            <span>美式</span>
                        </div>
                    </div>
                </div>

                <div class=" form-group bodyz">
                    <!-- 家装设计内容区域 -->
                </div>
                <div class=" form-group  center_center" style="border-top: 1px solid #ddd;padding-top: 20px;">
                    <p style="font-weight: bold;width: 400px;">审核记录</p>
                </div>
                <div style="margin-top:10px">
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;">
                            <span>审核结果：审核通过</span>
                            <span>备注：无</span>
                        </p>

                    </div>
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;border-bottom: 1px solid #ddd;padding-bottom: 10px;">
                            <span>审核时间：2019-10-21 15：00</span>
                            <span>审核人：杨冰飞</span>
                        </p>
                    </div>
                </div>
                <div style="margin-top:10px">
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;">
                            <span>审核结果：审核不通过</span>
                            <span>备注：<span class="red">图片不清晰</span></span>
                        </p>

                    </div>
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;border-bottom: 1px solid #ddd;padding-bottom: 10px;">
                            <span>审核时间：2019-10-21 15：00</span>
                            <span>审核人：杨冰飞</span>
                        </p>
                    </div>
                </div>
                <div style="margin-top:10px">
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;">
                            <span>审核结果：审核通过</span>
                            <span>备注：无</span>
                        </p>

                    </div>
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;border-bottom: 1px solid #ddd;padding-bottom: 10px;">
                            <span>审核时间：2019-10-21 15：00</span>
                            <span>审核人：杨冰飞</span>
                        </p>
                    </div>
                </div>
                <div style="margin-top:10px">
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;">
                            <span>审核结果：审核通过</span>
                            <span>备注：无</span>
                        </p>

                    </div>
                    <div class=" form-group  center_center">
                        <p style="width: 400px;display: flex;justify-content: space-between;border-bottom: 1px solid #ddd;padding-bottom: 10px;">
                            <span>审核时间：2019-10-21 15：00</span>
                            <span>审核人：杨冰飞</span>
                        </p>
                    </div>
                </div>
                <!-- <div class="form-group item softNum"><i class="fa fa-thumbs-o-up fa-hover"></i><span>点赞</span><span>10</span><i class="fa fa-share-alt fa-hover"></i><span>分享</span><span>10</span><i class="fa fa-star"></i><span>收藏</span><span>10</span></div>  点赞内容js添加-->
                <div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
                <div class="item form-group center_center compageS">
                    <!-- <div class="allShuju">共<span>10</span>页/<span>100</span>条数据</div> -->
                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                    <!-- <div class="jampPage">跳至<input type="number" min=1  >页</div> -->
                </div>
                <div id="hiddenresult" style="display:none;">

                </div>
            </div>

        </div>
    </div>
    <!-- /page content中间的内容 -->

    <!-- footer content -->
    <footer>
        <div class="pull-right">
            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
        </div>
        <div class="clearfix"></div>
    </footer>
    <!-- /footer content -->

</div>
</div>
<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="../assets/js/fastclick.js"></script>
<!-- NProgress -->
<script src="../assets/js/nprogress.js"></script>
<!-- Chart.js -->
<script src="../assets/js/Chart.min.js"></script>
<!-- gauge.js -->
<script src="../assets/js/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="../assets/js/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../assets/js/icheck.min.js"></script>
<!-- jQuery Tags Input -->
<script src="../assets/js/jquery.tagsinput.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../assets/js/bootstrap-wysiwyg.js"></script>
<script src="../assets/js/jquery.hotkeys.js"></script>
<script src="../assets/js/prettify.js"></script>
<!-- Skycons -->
<script src="../assets/js/skycons.js"></script>
<!-- Flot -->
<script src="../assets/js/jquery.flot.js"></script>
<script src="../assets/js/jquery.flot.pie.js"></script>
<script src="../assets/js/jquery.flot.time.js"></script>
<script src="../assets/js/jquery.flot.stack.js"></script>
<script src="../assets/js/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="../assets/js/jquery.flot.orderBars.js"></script>
<script src="../assets/js/jquery.flot.spline.min.js"></script>
<script src="../assets/js/curvedLines.js"></script>
<!-- DateJS -->
<script src="../assets/js/date.js"></script>
<!-- JQVMap -->
<script src="../assets/js/jquery.vmap.js"></script>
<script src="../assets/js/jquery.vmap.world.js"></script>
<script src="../assets/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../assets/js/moment.min.js"></script>
<script src="../assets/js/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="../assets/js/custom.min.js"></script>
<!-- Dropzone.js -->
<script src="../assets/js/dropzone.min.js"></script>
<!-- 分页 -->
<script src="../assets/js/pagination.js"></script>
<!-- 地址 -->
<script src="../assets/js/address.js"></script>
<script>
    var id = "${item}";
    var userId = "${userId}";
    console.log(id)
    let message = {}
    $(document).ready(function () {
        //获取信息
        let formData = new FormData()
        formData.append('designId', id)
        $.ajax({
            url: 'http://localhost:8086/backstageRotationChart/specific',
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.code == 0) {
                    // console.log(res.data)
                    message = res.data

                    $('.auther_message>img')[0].src = message.specific.userImage
                    $('.auther_message>div>span')[0].innerText = message.specific.userName
                    $('.title>span')[0].innerText = message.specific.designTitle
                    $(".auther_message>div>div>span:first-of-type")[0].innerText = message.specific.apartmentContent ? message.specific.apartmentContent : message.specific.designApartment
                    $(".auther_message>div>div>span:nth-of-type(2)")[0].innerText = message.specific.areaNumber + "平方米"
                    $(".auther_message>div>div>span:nth-of-type(3)")[0].innerText = message.specific.placeContent ? message.specific.placeContent : message.specific.designPlace
                    $(".auther_message>div>div>span:nth-of-type(4)")[0].innerText = message.specific.styleContent ? message.specific.styleContent : message.specific.designStyle
                    let json = JSON.parse(res.data.specific.designContent)
                    for (let a = 0; a < json.ops.length; a++) {
                        if (json.ops[a].insert.image) {
                            $(".bodyz").append("<img src='" + json.ops[a].insert.image + "'>")
                        } else {
                            let p = document.createElement("p")
                            p.style.whiteSpace = 'pre'
                            p.innerHTML = json.ops[a].insert
                            $(".bodyz").append(p)
                        }
                    }
                    $(".bodyz").append('<p style="margin-top:40px">提交时间：' + message.specific.updateTime + '</p>')
                    let html2 = '<div class="form-group item softNum"><i class="fa fa-thumbs-o-up fa-hover"></i><span>点赞</span><span>' + message.specific.zanNumber + '</span><i class="fa fa-share-alt fa-hover"></i><span>分享</span><span>' + message.specific.collectionNumber + '</span><i class="fa fa-star"></i><span>收藏</span><span>' + (message.specific.shareNum ? message.specific.shareNum : 0) + '</span></div>'
                    $("#Searchresult").before(html2)
                }
            }
        })
        //获取评论信息
        let formData1 = new FormData()
        formData1.append('answerId',id)
        $.ajax({
            url: 'http://localhost:8086/backstageRotationChart/allComment',
            type: "post",
            data: formData1,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.code == 0){
                    console.log(res.data)
                    let list=res.data.comment?res.data.comment:[]
                    let n=Math.ceil(list.length/3)
                    let end=Math.floor(list.length/3)
                    for(let a=0;a<n;a++){
                        let div=document.createElement("div")
                        div.className='result'
                        let nList
                        if((a+1)<=end){
                            nList=3
                        }else{
                            nList=list.length%3
                        }
                        for(let b=0;b<nList;b++){
                            let div1=document.createElement("div")
                            div1.className='allComment'
                            if(list[(3*a+b)].useState==0){
                                div1.innerHTML='<img src="'+list[(3*a+b)].userImage+'" alt=""><div><span>'+list[(3*a+b)].userName+'</span><span>'+list[(3*a+b)].content+'</span><div><span>'+list[(3*a+b)].addTime+'</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>隐藏</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>删除</span></div></div>'
                            }else{
                                div1.innerHTML='<img src="'+list[(3*a+b)].userImage+'" alt=""><div><img src="../assets/img/yincang.png" alt=""><span>'+list[(3*a+b)].userName+'</span><span>'+list[(3*a+b)].content+'</span><div><span>'+list[(3*a+b)].addTime+'</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>不隐藏</span><span data-useid='+list[(3*a+b)].userId+' data-id='+list[(3*a+b)].commentId+'>删除</span></div></div>'
                            }
                            div.append(div1)
                        }
                        $("#hiddenresult").append(div)
                        //点击隐藏
                        $('.allComment>div>div>span:nth-of-type(2)').unbind('click').bind('click',function(e){
                            console.log(e.currentTarget.dataset.id)
                            console.log($(this)[0].innerText)
                            let formData1 = new FormData();
                            formData1.append('id',id);
                            formData1.append('commentId',e.currentTarget.dataset.id);
                            formData1.append('content',$(this)[0].innerText);
                            formData1.append('userId',e.currentTarget.dataset.useid);
                            $.ajax({
                                url: 'http://localhost:8086/backstageRotationChart/hide',
                                type: "post",
                                data: formData1,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    console.log("success")
                                }
                            });
                            let list=$(".current"),index
                            for(let a=0;a<list.length;a++){
                                if(list[a].innerText!='上一页'&&list[a].innerText!='下一页'){
                                    index=Number(list[a].innerText)-1
                                    break
                                }
                            }
                            if($(this).parent().parent().children("img").length>=1){
                                $(this).parent().parent().children("img").remove()
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div").children("img").remove()
                                $(this)[0].innerText='隐藏'
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div>div>span:nth-of-type(2)")[0].innerText='隐藏'

                            }else{
                                $(this).parent().parent().append('<img src="../assets/img/yincang.png" alt="">')
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div").append('<img src="../assets/img/yincang.png" alt="">')
                                $(this)[0].innerText='不隐藏'
                                $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")>div>div>span:nth-of-type(2)")[0].innerText='不隐藏'
                            }

                        })
                        //点击删除
                        $('.allComment>div>div>span:nth-of-type(3)').unbind('click').bind('click',function(e){
                            console.log(e.currentTarget.dataset.id)
                            console.log('点击删除')
                            let formData2= new FormData();
                            formData2.append('id',id);
                            formData2.append('commentId',e.currentTarget.dataset.id);
                            formData2.append('userId',e.currentTarget.dataset.useid);
                            $.ajax({
                                url: 'http://localhost:8086/backstageRotationChart/deleteComment',
                                type: "post",
                                data: formData2,
                                processData: false,
                                contentType: false,
                                success: function(res){
                                    console.log("success")
                                }
                            });
                            let list=$(".current"),index
                            for(let a=0;a<list.length;a++){
                                if(list[a].innerText!='上一页'&&list[a].innerText!='下一页'){
                                    index=Number(list[a].innerText)-1
                                    break
                                }
                            }
                            $("#hiddenresult div.result:eq("+index+")>.allComment:eq("+$('.allComment').index($(this).parent().parent().parent()[0])+")").remove()
                            $(this).parent().parent().parent().remove()
                        })
                        var initPagination = function() {
                            var num_entries = $("#hiddenresult div.result").length;
                            // 创建分页
                            $("#Pagination").pagination(num_entries, {
                                num_edge_entries: 1, //边缘页数
                                num_display_entries: 4, //主体页数
                                callback: pageselectCallback,
                                items_per_page:1 ,//每页显示1项
                                prev_text:'上一页',
                                next_text:'下一页'
                            });
                        }();

                        function pageselectCallback(page_index, jq){
                            var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone(true);
                            $("#Searchresult").empty().append(new_content); //装载对应分页的内容
                            return false;
                        }
                    }
                }
            }})
        //点击返回
        $('.title>.back').click(function(e){
            history.go(-1)
            console.log('点击返回')
        })


    })
</script>
</body>
</html>
